<template>
	<view class="user-perfetion-page">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" :label-width="200">

			<uni-forms-item label="时间类型" required>
				<uni-data-checkbox v-model="formData.datatype" :localdata="datatype" />
			</uni-forms-item>
			<uni-forms-item label="时间" required name="date_time" v-if="formData.datatype ==1">
				<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.date_time" />
			</uni-forms-item>
			<uni-forms-item label="时间" required name="date_time" v-if="formData.datatype==2">
				<picker mode="date" :value="formData.date_time" fields="month" @change="bindDateChange">  
					<uni-easyinput type="text" v-model="formData.date_time" placeholder="请选择月份" />
				</picker>
			</uni-forms-item>

			<uni-forms-item label="类型" required>
				<uni-data-checkbox v-model="formData.unt" :localdata="untype" />
			</uni-forms-item>
			<uni-forms-item label="品名" required name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="单价" required name="price">
				<div class="input-box">
					<uni-easyinput type="text" v-model="formData.price" placeholder="请输入" @click="input()" />
					<span class="dw">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</span>
				</div>
			</uni-forms-item>
			<uni-forms-item label="数量" name="manage">
				<div class="input-box">
					<uni-easyinput type="text" v-model="formData.num" placeholder="请输入" @click="input()" />
				</div>
			</uni-forms-item>
			<uni-forms-item label="合计" name="manage">
				<uni-easyinput type="text" v-model="formData.price_all" placeholder="请输入" />
			</uni-forms-item>

			<div style='margin-top: 10rx;height: 150rpx;'></div>
			<div class="foot">
				<button class="submit" @click="submit">提交</button>
			</div>


		</uni-forms>
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=7446 身份证正反面上传文档
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		data() {
			return {
				formData: {
					name: '',
					unt: 1,
					date_time: "",
					price: '',
					num: 1,
					price_all: 0,
					unit:'',
				},
				datatype: [{
					text: '日',
					value: 1
				}, {
					text: '月',
					value: 2
				}],
				untype: [{
					text: '收入',
					value: 1
				}, {
					text: '支出',
					value: 2
				}],
				rules: {
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请输入品名',
							}
						],
					},
					price: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请输入价格',
							}
						],
					},
				},

				value: 0,
				range: [],
			};
		},
		components: {
			RboyUploadSfz,
		},
		onLoad(e) {
			this.id = e.id;
			this.detail();
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules);
			this.getlist();
		},
		watch: { //监视属性
			'formData.datatype':{
				deep:true,
				handler(value) { //变化后的值 变化前的值 可以进行一些计算
					//this.formData.date_time = '';
				}
			},
			'formData':{
				deep:true,
				handler(value) { //变化后的值 变化前的值 可以进行一些计算
					this.formData.price_all = (this.formData.price * this.formData.num).toFixed(2);
				}
			},
		},
		methods: {
			input() {
				this.formData.price_all = this.formData.price * this.formData.num;
			},
			getlist() {
				this.$H.get('/Finance/unit').then(res => {
					this.range = res.data.list
				})
			},
			detail() {
				this.$H.get('/Finance/detail',{id:this.id}).then(res => {
					this.show = false;
					this.formData = res.data.detail
				})
			},
			bindDateChange(e){
				this.formData.date_time =  e.detail.value;
			},
			change(e) {
				this.formData.unit = e;
			},

			// 表单提交
			submit(form) {
				this.$refs.form.validate().then(res => {
					this.$H.post('/finance/edit',{
						form:this.formData
					}).then(res => {
						if(res.status == 500) {
							uni.showToast({
								icon:"none",
								title:res.message
							})
						}
						if(res.status == 200) {
							uni.showToast({
								icon:"success",
								title:res.message
							})
							
							setTimeout(() => {
								// uni.navigateTo({
								// 	url: '/pages/my/my-finance',
								// })
								// uni.navigateBack()
								uni.navigateBack({
								    delta: 1, // 返回层数，2则上上页
								    success() {
								        uni.$emit('update',{msg:'页面更新'})
								    }
								})
							},2000)
						}
					})
					
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang='scss'>
	.user-perfetion-page {
		padding: 30px 30rpx;
		box-sizing: border-box;
	}

	.imglist-box {
		display: flex;
		align-items: center;

		.slimg {
			width: 300rpx;
		}

		.file-imgbox {
			width: 300px;
			height: 200px;
		}
	}

	.foot {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		height: 150rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit {
		width: 600rpx;
		height: 92rpx;
		background: #17BF8B;
		border-radius: 46rpx;
		color: #fff;


	}

	.input-box {
		display: flex;

		.dw {
			width: 200rpx;
			flex-grow: 0;
			margin-left: 10rpx;
			height: 100%;

		}

	}
</style>